<template>
  <div>
    <!-- 公司 -->
    <div class="commontop">
      <div class="commontop-left">
        <el-form :inline="true" :model="pages" :rules="filesForm" ref="pages">
          <el-form-item prop="keyword">
            <el-input
              v-model="pages.keyword"
              placeholder="操作人、操作内容"
              clearable
              prefix-icon="el-icon-search"
            ></el-input>
          </el-form-item>
          <el-form-item prop="search_type">
            <el-select clearable  v-model="pages.search_type" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="date_range">
            <el-date-picker
              v-model="pages.date_range"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-button
            @click="SubmitBtnS"
            class="searchbgc"
            icon="iconfont icon-sousuo2"
            >搜索</el-button
          >
        </el-form>
      </div>
    </div>
    <el-table
      v-loading="isLoading"
      element-loading-text="玩命加载中"
      element-loading-spinner="el-icon-loading"
      :data="tableData"
      ref="multipleSelection"
      @selection-change="handleSelectionChange"
      :header-cell-style="{ backgroundColor: '#3963fd', color: '#fff' }"
      style="width: 100%; margin-top: 20px"
    >
      <template slot="empty">
        <img src="@/assets/imgs/暂未数据.png" alt style="margin-top: 104px" />
        <p style="margin-top: 15px; margin-bottom: 104px">暂未有数据</p>
      </template>
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column
        prop="user_name"
        label="操作人"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="company_name"
        label="公司"
        width="160"
      ></el-table-column>
      <el-table-column
        prop="role_name"
        label="角色"
        width="160"
      ></el-table-column>
      <el-table-column
        prop="event"
        label="事件"
        width="180"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        prop="detail"
        label="详情"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        prop="action_ip"
        label="登录IP"
        width="140"
      ></el-table-column>
      <el-table-column
        prop="created_at"
        label="时间"
        width="180"
      ></el-table-column>
      <!-- <el-table-column label="操作" width="120px">
        <template slot-scope="scope">
          <el-button class="green" size="mini" @click="recovery(scope.row.id)"
            ><i class="iconfont icon-huifu"></i
          ></el-button>
          <el-button
            size="mini"
            class="red"
            @click.native.prevent="deleteRow(scope.row.id)"
            ><i class="el-icon-delete"></i
          ></el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current_page"
        :page-sizes="pageSizeArr"
        :page-size="pages.per_page"
        layout="total, sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { Actionlogs } from "../../api/home/index";
import commonInfo from "@/utils/common";
export default {
  data() {
    return {
      tableData: [],
      //按钮显示隐藏
      xsyc: "1",
      filesForm: {},
      pages: {
        per_page: 10,
        page: 1,
        keyword: "",
        search_type: "",
        date_range: [],
      },
      current_page: 1,
      total: 0,
      options: [
        {
          value: "1",
          label: "公司",
        },
        {
          value: "2",
          label: "操作人",
        },
        {
          value: "3",
          label: "角色名",
        },
        {
          value: "4",
          label: "事件",
        },
        {
          value: "5",
          label: "详情",
        },
      ],

      //表格页面
      pageSizeArr: JSON.parse(JSON.stringify(commonInfo.pageSizeArr)),

      isLoading: true,
      drawer: false,
      //时间日期
    };
  },
  methods: {
    async loadData(num) {
      let res = await Actionlogs(num);
      console.log(res);
      this.tableData = res.data.data.data;
      this.total = res.data.data.total;
      this.pages.current_page = res.data.data.current_page;
      this.isLoading = false;
    },
    //提交选择模块
    async SubmitBtnS() {
      // 显示loading
      this.$loading();
      console.log(this.pages);
      let res = await Actionlogs(this.pages);
      console.log(res);
      this.tableData = res.data.data.data;
      this.total = res.data.data.total;
      this.pages.current_page = res.data.data.current_page;
      this.$loading().close();
    },

    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //分页
    handleCurrentChange(val) {
      console.log(val, 12);
      this.current_page = val;
      this.pages.page = val;

      console.log(this.pages);
      this.loadData(this.pages);
    },
    //分页
    handleSizeChange(val) {
      console.log(val, 123);
      this.pages.per_page = val;
      this.loadData(this.pages);
    },
  },
  created() {
    this.loadData(this.pages);
  },
};
</script>

<style scoped lang="less">
/deep/.el-table__header {
  margin-bottom: 20px;
}
/deep/.el-table {
  background-color: #f3f5fb;
}
/deep/.el-table .cell {
  display: flex;
}
/deep/.el-button--mini {
  font-size: 18px !important;
  padding: 7px 5px;
}
/deep/.commontop-left .el-input {
  width: 100%;
}
/deep/.commontop-left .el-form-item {
  margin-bottom: 0px;
}
// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 6px; // 纵向滚动条 必写
}
// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}
</style>